<template>
	<FullCalendar class="demo-app-calendar" :options="calendarOptions">
		<template v-slot:eventContent="arg">
			<b>{{ arg.timeText }}</b>
			<i>{{ arg.event.title }}</i>
		</template>
	</FullCalendar>
</template>

<style lang="css">
/* 
.fc .fc-button-primary {
	background-color: #40a0ff33;
	border-color: #40a0ff00;
	color: #409eff;
}

.fc .fc-button-primary:hover {
	background-color: #40a0ff55;
	border-color: #40a0ff00;
	color: #ffffff;
}

.fc .fc-button-primary:disabled {
	background-color: #40a0ff;
	border-color: #40a0ff00;
	color: #000000;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	background-color: #40a0ff;
	border-color: #409eff;
	color: #000000;
} */
</style>

<script lang="ts">
import { CalendarOptions, EventApi, DateSelectArg, EventClickArg, EventInput } from '@fullcalendar/core'

import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
import {} from '@/api/nb/event-utils'

import { defineComponent } from 'vue'

export default defineComponent({
	components: {
		FullCalendar
	},
	props: ['eventsData'],
	setup(props, { emit }) {
		const INITIAL: EventInput[] = props.eventsData.dataList

		const openAddView = () => {
			emit('openAddView')
		}

		return { openAddView, INITIAL }
	},
	data() {
		return {
			calendarOptions: {
				locale: zhCnLocale,
				plugins: [
					dayGridPlugin,
					timeGridPlugin,
					interactionPlugin // needed for dateClick
				],
				headerToolbar: {
					left: 'prev,next today',
					center: 'title',
					right: 'dayGridMonth,timeGridWeek,timeGridDay'
				},
				initialView: 'dayGridMonth',
				events: this.INITIAL, // alternatively, use the `events` setting to fetch from a feed
				editable: true,
				selectable: true,
				selectMirror: true,
				dayMaxEvents: true,
				weekends: true,
				select: this.handleDateSelect,
				eventClick: this.handleEventClick,
				eventsSet: this.handleEvents
				/* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
			} as CalendarOptions,
			currentEvents: [] as EventApi[]
		}
	},
	methods: {
		handleWeekendsToggle() {
			this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
		},
		handleDateSelect(selectInfo: DateSelectArg) {
			this.openAddView()

			// let title = prompt('Please enter a new title for your event')
			// let calendarApi = selectInfo.view.calendar

			// calendarApi.unselect() // clear date selection

			// if (title) {
			// 	calendarApi.addEvent({
			// 		id: createEventId(),
			// 		title,
			// 		start: selectInfo.startStr,
			// 		end: selectInfo.endStr,
			// 		allDay: selectInfo.allDay
			// 	})
			// }
		},
		handleEventClick(clickInfo: EventClickArg) {
			if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
				clickInfo.event.remove()
			}
		},
		handleEvents(events: EventApi[]) {
			this.currentEvents = events
		},
		return() {}
	}
})
</script>
